<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">

	<title>登录|注册——大连万达耐酸泵厂有限公司</title>
	<meta content="登录|注册" name="description">
	<meta content="登录,注册,大连万达耐酸泵厂" name="keywords">
	<!-- Favicons -->
	<link href="assets/img/logo.png" rel="icon">

	<!-- Vendor CSS Files -->
	<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
	<link href="assets/vendor/aos/aos.css" rel="stylesheet">
	<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
	<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
	<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
	<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

	<!-- Template Main CSS File -->
	<link href="assets/css/style.css" rel="stylesheet">

	<style type="text/css">
		:root {
			/* COLORS */
			--white: #e9e9e9;
			--gray: #333;
			--blue: #0367a6;
			--lightblue: #008997;

			/* RADII */
			--button-radius: 0.7rem;

			/* SIZES */
			--max-width: 758px;
			--max-height: 420px;

			font-size: 16px;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
			overflow: hidden;
		}

		.signbody {
			align-items: center;
			background-color: var(--white);
			background: url("./assets/img/background.jpg");
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			display: grid;
			height: 100vh;
			place-items: center;
			overflow: hidden;
		}

		.form__title {
			font-weight: 300;
			margin: 0;
			margin-bottom: 1.25rem;
		}

		.link {
			color: var(--gray);
			font-size: 0.9rem;
			margin: 1.5rem 0;
			text-decoration: none;
		}

		.container {
			background-color: var(--white);
			border-radius: var(--button-radius);
			box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
			height: var(--max-height);
			max-width: var(--max-width);
			overflow: hidden;
			position: relative;
			width: 100%;
		}

		.container__form {
			height: 100%;
			position: absolute;
			top: 0;
			transition: all 0.6s ease-in-out;
		}

		.container--signin {
			left: 0;
			width: 50%;
			z-index: 2;
		}

		.container.right-panel-active .container--signin {
			transform: translateX(100%);
		}

		.container--signup {
			left: 0;
			opacity: 0;
			width: 50%;
			z-index: 1;
		}

		.container.right-panel-active .container--signup {
			animation: show 0.6s;
			opacity: 1;
			transform: translateX(100%);
			z-index: 5;
		}

		.container__overlay {
			height: 100%;
			left: 50%;
			overflow: hidden;
			position: absolute;
			top: 0;
			transition: transform 0.6s ease-in-out;
			width: 50%;
			z-index: 100;
		}

		.container.right-panel-active .container__overlay {
			transform: translateX(-100%);
		}

		.overlay {
			background-color: var(--lightblue);
			background: url("./assets/img/sign.jpg");
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 100%;
			left: -100%;
			position: relative;
			transform: translateX(0);
			transition: transform 0.6s ease-in-out;
			width: 200%;
		}

		.container.right-panel-active .overlay {
			transform: translateX(50%);
		}

		.overlay__panel {
			align-items: center;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			position: absolute;
			text-align: center;
			top: 0;
			transform: translateX(0);
			transition: transform 0.6s ease-in-out;
			width: 50%;
		}

		.overlay--left {
			transform: translateX(-20%);
		}

		.container.right-panel-active .overlay--left {
			transform: translateX(0);
		}

		.overlay--right {
			right: 0;
			transform: translateX(0);
		}

		.container.right-panel-active .overlay--right {
			transform: translateX(20%);
		}

		.btn {
			background-color: var(--blue);
			background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
			border-radius: 20px;
			border: 1px solid var(--blue);
			color: var(--white);
			cursor: pointer;
			font-size: 0.8rem;
			font-weight: bold;
			letter-spacing: 0.1rem;
			padding: 0.9rem 4rem;
			text-transform: uppercase;
			transition: transform 80ms ease-in;
		}

		.form>.btn {
			margin-top: 1.5rem;
		}

		.btn:active {
			transform: scale(0.95);
		}

		.btn:focus {
			outline: none;
		}

		.form {
			background-color: var(--white);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0 3rem;
			height: 100%;
			text-align: center;
		}

		.input {
			background-color: white;
			border: none;
			padding: 0.9rem 0.9rem;
			margin: 0.5rem 0;
			width: 100%;
		}

		@keyframes show {

			0%,
			50% {
				opacity: 0;
				z-index: 1;
			}

			50.01%,
			100% {
				opacity: 1;
				z-index: 5;
			}
		}
	</style>
</head>

<body>
	<!-- ======= Header ======= -->
	<header id="header" class="fixed-top d-flex align-items-center ">
		<div class="logo">
			<h1 class="text-light">
				<a class="arrow-return-left" href="javascript:history.back(-1)">
					<span> &nbsp; <i class="bx bx-arrow-back"></i>返回</span>
				</a>
			</h1>
		</div>
	</header><!-- End Header -->

	<main id="main">
		<section class="signbody">
			<!-- ======= Contact Section ======= -->
			<div class="container">
				<!-- 注册 -->
				<div class="container__form container--signup">
					<form action="#" class="form" id="formup">
						<h2 class="form__title">注册</h2>
						<input type="text" placeholder="用户名" class="input" id="signupName" />
						<input type="email" placeholder="电子邮箱" class="input" id="signupEmail" />
						<input type="password" placeholder="密码" class="input" id="signupPassword" />
						<button class="btn" onclick="signX(false)">注册</button>
					</form>
				</div>

				<!-- 登录 -->
				<div class="container__form container--signin">
					<form action="#" class="form" id="formin">
						<h2 class="form__title">登录</h2>
						<input type="email" placeholder="电子邮箱" class="input" id="signinEmail" />
						<input type="password" placeholder="密码" class="input" id="signinPassword" />
						<a href="#" class="link">忘记密码？</a>
						<button class="btn" onclick="signX(true)">登录</button>
					</form>
				</div>

				<!-- Overlay -->
				<div class="container__overlay">
					<div class="overlay">
						<div class="overlay__panel overlay--left">
							<button class="btn" id="signIn">登录</button>
						</div>
						<div class="overlay__panel overlay--right">
							<button class="btn" id="signUp">注册</button>
						</div>
					</div>
				</div>
			</div>
			<script>
				const signInBtn = document.getElementById("signIn");
				const signUpBtn = document.getElementById("signUp");
				const fistForm = document.getElementById("formup");
				const secondForm = document.getElementById("formin");
				const container = document.querySelector(".container");

				// 从地址获取isSignUp的值并判断是否为"true"，
				if ((new URLSearchParams((new URL(window.location.href)).search)).get('isSignUp') === 'true') {
					container.classList.add("right-panel-active");
				}

				signInBtn.addEventListener("click", () => {
					container.classList.remove("right-panel-active");
				});

				signUpBtn.addEventListener("click", () => {
					container.classList.add("right-panel-active");
				});

				fistForm.addEventListener("submit", (e) => e.preventDefault());
				secondForm.addEventListener("submit", (e) => e.preventDefault());

			</script>
		</section>
	</main>
	<footer>
		<a class="lianjie back-to-top d-flex align-items-center justify-content-center" href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2022006841号-1</a>
	</footer>

	<!-- Vendor JS Files -->
	<script src="assets/vendor/purecounter/purecounter.js"></script>
	<script src="assets/vendor/aos/aos.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
	<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
	<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
	<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>

	<!-- Template Main JS File -->
	<script src="assets/js/main.js"></script>
	<script src="assets/js/common.js"></script>
	<script src="assets/js/jquery-1.8.3.min.js"></script>
	<script>
		function signX(isIn) {
			const signData = isIn ? { email: signinEmail.value, password: signinPassword.value } : { name: signupPassword.value, email: signupEmail.value, password: signupPassword.value }
			$.ajax({
				url: serverHost + "/api/user/sign",
				type: 'POST',
				contentType: 'application/json', // 设置请求内容类型
				data: JSON.stringify(signData),
				success: function (data) {
					if (data.token) {
						alert((isIn?"登录":"注册") + "成功！");
						localStorage.setItem('token', data.token); // 保存 token
						location.href = "./" + data.role + "/?id=" + data.id;
					} else {
						alert((isIn?"登录":"注册") + "失败，请重试！");
					}
				},
				error: function (jqXHR) {
					alert("错误: " + jqXHR.responseText);
				}
			});
		}
	</script>
</body>

</html>